<template>
	<view class="loginWrapper" :style="{height: clientHeight+'px'}">
		<view class="loginMain">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="账号: " name="userName">
					<uni-easyinput type="text" v-model="formData.userName" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="密码: " name="email">
					<uni-easyinput  class="input" v-model="formData.userPassword" type="password" placeholder="请输入密码"/>
				</uni-forms-item>
			</uni-forms>
			<button @click="submit" >登陆</button>
			<button @click="setupIp">ip设置</button>
		</view>
		
		<uni-popup ref="setupIp" type="center">
			<view class="wrapper">
				<view class="modal-title">设置ip</view>
				<view class="modal-body">
					<uni-easyinput type="text" placeholder="请输入ip" v-model="ip"></uni-easyinput>
				</view>
				<view class="footer">
					<button class="btn cancel" @click="cancelSetUpIp">取消</button>
					<button class="btn" @click="confirmSetupIp">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import login from '/common/login.js'
	export default {
		name: 'Login',
		data() {
			return {
				clientHeight: 0,
				formData: {
					userName: null,
					userPassword: null
				},
				ip: null,
				rules: {
					// 对name字段进行必填验证
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入账号',
						}]
					},
					// 对email字段进行必填验证
					userPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					}
				}
			};
		},
		onReady() {
			let res = uni.getWindowInfo();
			this.clientHeight = res.windowHeight - res.statusBarHeight * res.pixelRatio;
			if(login.api.getToken()){
				uni.switchTab({
					url: "/pages/readCardByNfc/readCardByNfc"
				});
			}
			
			this.ip = login.api.getIp();
		},
		methods: {
			cancelSetUpIp(){
				this.$refs.setupIp.close();
			},
			confirmSetupIp(){
				let res = this.validIp(this.ip);
				if(res.valid){
					login.api.setupIp(this.ip);
					uni.showToast({
						title: "ip设置成功",
						icon: 'success',
						duration: 2000
					});
					this.cancelSetUpIp();
				}else{
					uni.showToast({
						title: res.title,
						icon: "error",
						duration: 2000
					})
				}
			},
			validIp(ip){
				let valid = true, title = '';
				if(!ip){
					title = "ip不能为空";
					valid = false;
				}else{
					var arr = ip.split('.');
					if(arr.length < 4){
						title = "ip设置不正确";
						valid = false;
					}else{
						let len = arr.filter(item=>isNaN(item) || item > 255).length;
						if(len >0){
							title = "ip设置不正确";
							valid = false;
						}
					}
				}
				return {valid: valid, title: title};
			},
			setupIp(){
				this.$refs.setupIp.open();
			},
			submit() {
				this.$refs.form.validate().then(
				res=>{
					console.log(this.formData)
					login.doLogin(this.formData, ()=>{
						uni.$emit("hasLogined");
						uni.switchTab({
							url: "/pages/readCardByNfc/readCardByNfc"
						});
					});
				}
				);
			}
		}
	}
</script>
<style>
	.loginWrapper {
		position: relative;
		display: block;
		vertical-align: middle;
		height: 1000upx;
	}

	.loginWrapper .loginMain {
		position: absolute;
		height: 400upx;
		width: 80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.wrapper{
		width:600rpx;
		height: 300rpx;
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
	}
	
	.wrapper .modal-title{
		height:90rpx;
		line-height: 90rpx;
		width:100%;
		text-align: center;
		font-size: 32rpx;
		color: #666;
	}
	
	.wrapper .modal-body{
		margin: 10rpx 30rpx;
	}
	
	.wrapper .btn{
		width: 300rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		float: left;
		border-top: 1rpx solid #ddd;
	}
	
	.wrapper .cancel{
		width: 299rpx;
		border-right: 1rpx solid #ddd;
	}
	
	.wrapper .footer{
		position: absolute;
		bottom: 0rpx;
	}
	
</style>
